<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <todo1>
        <todo2 slot="todo-title" v-bind:title="title"></todo2>
        <todo3 slot="todo-items" v-for="(item,index) in todoItems"
               v-bind:item="item" v-bind:index="index"
               v-on:fdfdf="removeItems(index)"></todo3>
    </todo1>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>


    Vue.component("todo1", {
        template:
            '<div>\
                 <slot name="todo-title"></slot>\
                 <ul>\
                    <slot name="todo-items"></slot> \
                 </ul>\
             </div>'

    });

    Vue.component("todo2", {
        props: ["title"],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo3", {
        props: ["item", "index"],
        template: '<li>{{index}}--{{item}} <button v-on:click="remove">删除</button>' + '</li>',
        methods: {
            remove: function (index) {
                this.$emit('fdfdf', index);
            }
        }
    });


    var vm = new Vue({
        el: "#app",
        data: {
            title: "this title",
            todoItems: ["itme01", "itme02", "item03"]
        },
        methods: {
            removeItems: function (index) {
                this.todoItems.splice(index, 1);
            }
        }
    });
</script>
</body>
</html>